<template>
  <div>
    <img class="logo" src="../assets/images/logo.png" alt="" />
    <div class="title">
      <div :class="{active:isshow=='Home'}" @click="guonei">国内疫情</div>
      <div :class="{active:isshow=='haiwai'}" @click="haiwai">海外疫情</div>
    </div>
     <keep-alive>
          <component :is="isshow"></component>
     </keep-alive>
  </div>
</template>

<script>
import Home from "../views/home/HomeView.vue";
import haiwai from "../views/haiwai/haiwai.vue";
export default {
  data() {
    return {
      isshow: "Home",
    };
  },
  components: {
    Home,
    haiwai,
  },
  methods:{
      guonei(){
        this.isshow='Home'
      },
      haiwai(){
          this.isshow='haiwai'
      }

  }
};
</script>

<style lang="less" scoped>
.logo {
  width: 100%;
}
.title {
  position: relative;
  overflow: hidden;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  text-align: center;
  margin-top: -0.4rem;
  border-radius: 0.2rem 0.2rem 0 0;
  background-color: #ddecff;
  > div {
    flex: 1;
  }
}
.active{
    background-color: #fff;
    color: rgb(40, 40, 236);
}
</style>>